<template>
  <div>
    <!-- {{ prductForm }} -->
    <el-row>
      <el-col :span="8">
        <table style="margin-left:20px">
          <tr>
            <td style="line-height:30px;">
              <span class="titleFont">是否有会员折扣</span>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-radio v-model="prductForm.isDiscount" :label="0" @change="isDisCount('discount')">不支持</el-radio>
              <el-radio v-model="prductForm.isDiscount" :label="1">支持</el-radio>
            </td>
          </tr>
          <tr>
            <td>
              <table v-if="prductForm.isDiscount == 1" class="table" style="width:100%">
                <tr v-for="(item, index) in momList" :key="item.id">
                  <td>
                    <el-checkbox
                      v-model="isDiscountCheck[index]"
                      @change="vipGoodCheck(isDiscountCheck[index], index, item, 'discount')">
                      {{ item.name }}
                    </el-checkbox>
                    <el-input
                      v-if="discountList.length"
                      :style="{'margin-left':(index == 0 ? '22px': '8px')}"
                      :disabled="!isDiscountCheck[index]"
                      v-model="item.discount"
                      :class="{'discontIpt': true, 'redBroder':!testDiscount[index]}"
                      placeholder="请输入0 - 9.9之间的数"
                      @input="vipGoodChange(item, index, 'discount')"
                      @blur="testDR(item, index, 'discount')"
                    /> <span class="titleFont">折</span>
                  </td>
                </tr>
              </table>
          </td></tr>
        </table>
      </el-col>
      <el-col :span="8">
        <table style="width:100%; margin-left:20px">
          <tr>
            <td style="line-height:30px;">
              <span class="titleFont">会员复利返点</span>&nbsp;&nbsp;&nbsp;&nbsp;
              <el-radio v-model="prductForm.isMemberRebate" :label="0" @change="isDisCount('rebate')">不支持</el-radio>
              <el-radio v-model="prductForm.isMemberRebate" :label="1">支持</el-radio>
            </td>
          </tr>
          <tr>
            <td>
              <table v-if="prductForm.isMemberRebate == 1" class="table" style="width:100%">
                <tr v-for="(item, index) in momList" :key="item.id">
                  <td>
                    <el-checkbox
                      v-model="isRebateChecks[index]"
                      @change="vipGoodCheck(isRebateChecks[index], index, item, 'rebate')">
                      {{ item.name }}
                    </el-checkbox>
                    <el-input
                      v-if="discountList.length"
                      :style="{'margin-left':(index==0? '20px': '8px')}"
                      v-model="item.rebate"
                      :disabled="!isRebateChecks[index]"
                      :class="{'discontIpt': true, 'redBroder':!testRebate[index]}"
                      placeholder="请输入0 - 99之间的数"
                      @input="vipGoodChange(item, index, 'rebate')"
                      @blur="testDR(item, index, 'rebate')"
                    /> &nbsp; <span class="titleFont">%</span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </el-col>
      <el-col :span="8">333</el-col>
    </el-row>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { vipInfoAll, constantPercent } from '@/api/product'
export default {
  data() {
    return {
      momList: [],
      discountList: [],
      isDiscountCheck: [],
      isRebateChecks: [],
      testDiscount: [],
      testRebate: [],
      prductForm: {
        isDiscount: 1, // 是否有会员折扣  0：不支持  1：支持
        isMemberRebate: 1, // 会员复利返点 0：不支持  1：支持
        vipGoodsAttributes: []
      }
    }
  },
  created() {
    this.getMomList()
    this.getConstantPercent()
  },
  methods: {
    // 获取美妈类别
    getMomList() {
      vipInfoAll().then(res => {
        if (res.code === '200') {
          this.momList = res.data
          this.momList.forEach((item, index) => {
            this.isDiscountCheck[index] = false
            this.isRebateChecks[index] = false
          })
          this.momList.forEach((item, index) => {
            this.testDiscount[index] = true
            this.testRebate[index] = true
          })
        } else {
          Message.error(res.message)
        }
      })
    },
    // 获取折扣列表 所有折扣一致
    getConstantPercent() {
      constantPercent().then(res => {
        if (res.code === '200') {
          this.discountList = res.data
        } else {
          Message.error(res.message)
        }
      })
    },
    isDisCount(type) {
      const vipGoods = this.prductForm.vipGoodsAttributes
      // if (!vipGoods.length) return false
      // console.log('momList::', this.momList)
      // console.log('vipGoods::', vipGoods)
      for (let j = 0; j < this.momList.length; j++) {
        delete this.momList[j][type]
        // this.momList[j][type] = ''
        if (type === 'discount') this.isDiscountCheck[j] = false
        if (type === 'rebate') this.isRebateChecks[j] = false
      }
      // console.log('vipGoods.length:::::::', vipGoods.length)
      for (let i = 0; i < vipGoods.length; i++) {
        if (vipGoods[i][type]) delete vipGoods[i][type]
        if (!vipGoods[i].discount && !vipGoods[i].rebate) {
          vipGoods.splice(i, 1)
          i--
        }
      }
      this.prductForm.vipGoodsAttributes = vipGoods
    },

    // 当第N个折扣与返点都不存在都时候干掉数据里的第N项
    vipGoodCheck(ischecked, index, item, type) {
      const vipGoods = this.prductForm.vipGoodsAttributes
      // 取消美妈checkbox
      if (ischecked === false) {
        if (type === 'discount') {
          this.$set(this.testDiscount, index, true)
        }
        if (type === 'rebate') {
          this.$set(this.testRebate, index, true)
        }
        if (vipGoods.length > 0) {
          if (item[type]) item[type] = ''
          const i = vipGoods.findIndex(val => val.vipId === item.id)
          console.log(i)
          if (i !== -1) {
            if (this.momList[i][type]) this.momList[i][type] = ''
            delete vipGoods[i][type]
            if (!vipGoods[i].discount && !vipGoods[i].rebate) vipGoods.splice(i, 1)
          }
          this.prductForm.vipGoodsAttributes = vipGoods
        }
      }
    },
    testDR(item, index, type) {
      let reg
      if (type === 'discount') {
        reg = /^(?=0\.[0-9]|[0-9]\.\d).{3}$|^([0-9])$/
        const re = new RegExp(reg);
        if (re.test(item.discount)) {
          // console.log(index, '1正确')
          this.$set(this.testDiscount, index, true)
          // this.testDiscount[index] = true
          return true
        } else {
          // console.log(index, '1错误')
          this.$set(this.testDiscount, index, false)
          Message.error('请输入0 - 9.9之间的数字')
          return false
        }
      }
      if (type === 'rebate') {
        reg = /^([1-9]\d|\d)$/
        const re = new RegExp(reg);
        if (re.test(item.rebate)) {
          this.$set(this.testRebate, index, true)
          // console.log(index, '2正确')
          return true
        } else {
          // console.log(index, '2错误')
          this.$set(this.testRebate, index, false)
          return false
        }
      }
    },
    // 当选择第N个折扣或者返点添加数据项
    vipGoodChange(item, index, type) {
      const i = this.prductForm.vipGoodsAttributes.findIndex(val => val.vipId === item.id)
      let json = {}
      console.log(item[type])
      if (i === -1) { // 查看是否vipGoodsAttributes有这个id
        // 如果没有,创建一个新的json， 最后安插到vipGoodsAttributes中
        json.vipId = item.id
        json[type] = item[type]
        this.prductForm.vipGoodsAttributes.push(json)
        // console.log(111111)
      } else {
        json = this.prductForm.vipGoodsAttributes[i]
        json[type] = item[type]
        // if (type === 'discount') json[type] = item[type] / 10
        // if (type === 'rebate') json[type] = item[type] / 100
        this.$set(this.prductForm.vipGoodsAttributes, i, json)
      }
      console.log('第', i, '个的vip', this.prductForm.vipGoodsAttributes[i])
    }

  }
}
</script>
<style lang="scss">
    .table{
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .table td{
        border: 1px solid #ddd;
        padding: 5px 10px;
    }
    .discontIpt{
        width:58%
    }

    .redBroder {
        border: 1px solid red;
        box-sizing: border-box;
        border-radius: 4px;
        transition: all .5s;
    }
    .titleFont{
        font-size: 14px;
    }
</style>
